<template>
  <div style="border-bottom:1px solid #ddd">
    <div :class="{columns:true}" v-if="table.columns.length" :style="tableStyle">
      <div
        class="columns-item"
        v-for="(column, index) in table.columns"
        :key="column.key"
        v-text="column.title"
        v-if="!column.disabled"
        :style="{width:itemWidth(column.width),'text-align':column.align,..._theme}"
      ></div>
    </div>
    <div v-for="(item, rowIndex) in table.data" :key="rowIndex">
      <!--每行-->
      <div :class="{'data':true,'bg-led':stripe ? rowIndex%2!=0 : false}" :style="tableStyle">
        <div
          class="data-item"
          v-for="(column, index) in table.columns"
          :key="index"
          @click="column.onClick && column.onClick(item,rowIndex)"
          :style="{width:itemWidth(column.width),'text-align':column.align,'border':inBorder}"
          v-if="!column.disabled"
        >
          <!--每个-->
          <a v-if="column.type=='link'" v-text="item[column.key]"></a>
          <!-- link -->
          <Tag
            v-else-if="column.type=='tag'"
            v-text="item[column.key]"
            :color="column.colors[item[column.key]] || column.defaultColor"
          ></Tag>
          <!--tag -->
          <img
            v-else-if="column.type=='img'"
            :src="item[column.key]"
            :alt="item[column.key]"
            class="img"
          >
          <!-- 图片 -->
          <div v-else-if="column.type=='rank'">
             <img class='img' v-if="item[column.key]==1" src="../assets/rank1.png">
             <img class='img' v-else-if="item[column.key]==2" src="../assets/rank2.png">
             <img class='img' v-else-if="item[column.key]==3" src="../assets/rank3.png">
             <span class='img' v-else v-text="item[column.key]"></span>
          </div>
          <!-- 排名 -->
          <div v-else-if="column.type=='enum'">
            <span v-text="column.enum[item[column.key]] || column.default"></span>
          </div>
          <!-- 枚举 -->
          <span v-else v-text="item[column.key]"></span>
          <!-- text -->
        </div>
      </div>
    </div>
    <div v-if="table.data.length==0">
      <br>
      <p :style="{'text-align':'center','font-size':'0.9rem'}">暂无数据</p>
    </div>
  </div>
</template>

<script>
import {IViewTable} from "_i";

export default {
  name: "TablePart",
  props: {
    table: {
      author: IViewTable
    },
    stripe: {
      type: Boolean,
      default: true
    }, //是否显示斑马样式
    outBorder: {
      //外边框样式
      tyep: String,
      default: ""
    },
    inBorder: {
      //内边框样式
      tyep: String,
      default: ""
    },
    height: {
      type: String,
      default: "3rem"
    },
    theme: {
      type: String,
      default: "high"
    },
    extendRender:{
      type:Object,
      default:()=>{
        return {
          render:()=>{}
        }
      }
    }
  },
  components:{
  },
  data() {
    return {};
  },
  computed: {
    itemWidth() {
      return (w = 100) => w + "%";
    },
    tableStyle() {
      return {
        height: this.height,
        "line-height": this.height,
        border: this.outBorder
      };
    },
    _theme() {
      let themeSet = {
        dark: {
          background: "#999",
          color: "#fff"
        },
        high: {
          background: "#fff",
          color: "#515a6e"
        }
      };
      return themeSet[this.theme];
    }
  },
};
</script>

<style lang="less" scoped>
.data {
  display: flex;
  width: 100%;
  font-size: 1rem;
  height: 3rem;
  line-height: 3rem;
  // border-bottom: 1px solid #ddd;
  text-align: center;
  transition: 0.36s all;
  &:hover {
    background: rgb(236, 236, 236);
  }
  &-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover {
      overflow-x: auto;
      text-overflow: clip;
    }
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: #587785;
    }
    &::-webkit-scrollbar-track {
      background: #ffffff;
    }
  }
}

.columns:extend(.data) {
  border-bottom: 1px solid #ddd;
  box-shadow: #ddd 0px 1px 1px 0px;
  color: #fff;
  font-weight: bold;
  &-item {
    white-space: nowrap;
  }
}

.img {
  padding: 5% 0;
  height: 100%;
  border-radius: 100%;
}

.outClass {
}

.bg-led {
  background: rgb(243, 243, 243);
}
</style>